<template>
    <n-flex class="my-4" vertical>
        <div class="my-2 font-bold block items-center">{{ data.title }}</div>
        <div :class="computerResult" class="mb-2 text-4xl justify-center items-center">{{ data.data }}%
            <span class="text-lg mx-2 text-slate-500">{{ data.description }}</span>
        </div>
    </n-flex>

</template>

<script setup>
import { computed } from 'vue';
const props = defineProps(['data']);
const data = props.data;
const computerResult = computed(() => {
    return {
        'text-red-600': data.color == 'red',
        'text-green-700': data.color == 'green',
    }
})

</script>